<template>
  <div class="blurmain">
    <slot></slot>
    <div class="blurbg">
      <img :src="imageUrl" alt="" width="100%" height="100%" />
    </div>
  </div>
</template>

<script>
export default{
  props: {
    imageUrl: ''
  }
}
</script>

<style scoped>
  .blurmain {
    position: relative;
    background: rgba(7,17,27,0.2)
  }
  .blurbg {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(5px);
  }
</style>
